<!--添加/修改职位模态框-->
<div class="modal fade" id="position_modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">x</span>
                </button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">

                <form id="position_form" class="form-horizontal">
                    <div class="form-group">
                        <!--                        style="display:none"-->
                        <label class="col-sm-2 control-label">ID</label>
                        <div class="col-sm-10">
                            <input type="text" name="id" class="form-control" id="id_input" disabled>
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">职位名称</label>
                        <div class="col-sm-10">
                            <!-- placeholder是显示输入提示的属性 -->
                            <!-- name属性的值与实体类的属性名相同是为了能自动进行类对象的实例化 -->
                            <input type="text" name="position_name" class="form-control"
                                   id="position_name_input"
                                   placeholder="输入职位名称">
                            <span class="help-block "></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">职位简介</label>
                        <div class="col-sm-10">
                            <input type="text" name="brief" class="form-control" id="brief_input"
                                   placeholder="对该职位的描述">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">隶属部门</label>
                        <div class="col-sm-10">
                            <select id="department_select" name="department_id"
                                    class="selectpicker show-tick form-control" data-live-search="true"
                                    title="未选中任何部门" data-size="5">
                            </select>
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" id="position_cancel_btn" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" id="position_confirm_btn" class="btn btn-primary">确认</button>
            </div>
        </div>
    </div>
</div>

<!-- 该模态框用于删除职位 -->
<div class="modal fade" id="delete_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <!-- 模态框标题 -->
                <h4 class="modal-title">删除职位</h4>
            </div>
            <div class="modal-body">
                <p id="delete_tip_p">模态框内容</p>
                <p id="delete_id_p" style="visibility: hidden"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="delete_position_confirm_btn" class="btn btn-danger">确认</button>
            </div>
        </div>
    </div>
</div>

<div class="col-sm-10">

    <div class="page-header" style="margin-top: 10px;
    margin-bottom: 5px;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #ddd;
    padding: 15px;">
        <h2 style="margin: 0px">部门职能 / 职位管理</h2>
    </div>

    <div class="panel panel-default">
        <div class="panel-body">
            <!--搜索栏-->
            <div class="navbar-collapse" id="bs-example-navbar-collapse-1">
                <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <div class="navbar-header" style="width: 98%;">
                            <form class="navbar-form navbar-left" style="width: 98%;">
                                <div class="form-group">
                                    搜索：
                                    <input id="search_input" type="text" class="form-control" placeholder="Search">
                                </div>
                                <button class="btn btn-default" type="button" id="search_btn">搜索</button>
                                <div class="form-group" style="float: right;">
                                    <button class="btn btn-success" type="button" id="add_position_btn">新增职位</button>
                                    <button class="btn btn-info" type="button" id="switch_sub_table_btn">展开/关闭</button>
                                    <button class="btn btn-danger" type="button" id="mutiple_delete_btn">多选删除</button>
                                    <!--                                    <button class="btn btn-info" type="button" id="test1_btn">测试1</button>-->
                                    <!--                                    <button class="btn btn-info" type="button" id="test2_btn">测试2</button>-->
                                </div>
                            </form>

                        </div>
                    </div>
                </nav>
            </div>

            <!--添加按钮-->
            <div class="navbar-collapse" id="bs-example-navbar-collapse-2">
                <!--表格-->
                <!--                用于显示职位信息的表格-->
                <table id="position_curd_table"
                        class="table table-hover table-bordered table-striped"
                        data-id-field="id"
                        data-pagination="true"
                        data-side-pagination="server"
                        data-page-size="1"
                        data-page-list="[1, 5, 10, 20]"
                        data-unique-id="id"
                        data-response-handler="responseHandler">
                <!--                       data-search="true"-->
                <!--                       data-search-selector="#search_input"-->
                <!--                       data-show-refresh="true"-->
                <!--                       data-show-toggle="true"-->
                <!--                       data-show-columns="true"-->
                <!--                       data-show-columns-toggle-all="true"-->
                <!--                       data-click-to-select="true"-->
                <!--                       data-minimum-count-columns="2"-->
                <!--                data-show-footer="true"-->
                </table>

            </div>
        </div>
        <!--        该行用于显示分页信息-->
        <div class="row"></div>
    </div>
</div>

<script type="text/javascript">
    //定义一些页面作用域内的全局变量
    //该变量用于存储被勾选中的职位们
    var selectedPositions = [];
    //该变量用于判断子表在取消勾选时，父表项目是否应该进行子表全不选操作
    var canParentTableUncheck = true;

    //加载页面后进行的操作
    $(function () {
        // startWaiting();
        // 初始化页面
        init_page();
        //绑定按钮点击事件
        bindOnEvent();
        // checkIsFinish();
        //构建部门-职位表
        // initPositionTable($table, 2, 72);
    });

    /**
     * 该方法用于开始等待页面数据填充
     */
    function startWaiting() {
        //弹出等待模态框
        $('#wait_modal').modal({
            show: true,
            backdrop: 'static'
        });
    }

    /**
     * 该方法用于循环等待并判断是否已结束了页面加载，若是则结束，若否则继续等待
     */
    function checkIsFinish() {
        let intervalID = setInterval(function () {
            console.log("持续等待页面加载...");
            let to_page_finish = (sessionStorage.getItem("to_page_finish") === "true");
            let bindOnEvent_finish = (sessionStorage.getItem("bindOnEvent_finish") === "true");
            if (to_page_finish && bindOnEvent_finish) {//如果可以结束，则结束
                console.log("页面加载完成!");
                sessionStorage.removeItem("to_page_finish");
                sessionStorage.removeItem("bindOnEvent_finish");
                //关闭等待模态框
                $('#wait_modal').modal('hide');
                clearInterval(intervalID);//结束循环
            }
        }, 200);
    }

    //该方法用于初始时跳转到保留的页码
    function init_page() {
        //弹出等待模态框
        // $('#wait_modal').modal({
        //     show: true,
        //     backdrop: 'static'
        // });

        //开始前先移除main里面的所有点击事件
        unbindAll();
        //构建表格，但不填充数据
        initPositionTable();

        let nowPage = sessionStorage.getItem("nowRegularPage");
        if (nowPage == null) {
            to_page(1);//发送跳转请求到职位表第1页
        } else {
            to_page(nowPage);//跳转到保留页
        }
    }

    /**
     * 该方法用于移除所有的点击事件
     * (对on事件绑定的点击事件无效)
     */
    function unbindAll() {
        $("#main").find("*").each(function (index, item) {
            $(item).off();//移除点击事件
        });
    }

    /**
     * 该方法用于跳转到页面（并不构建表格）
     */
    function to_page(pn) {
        let options = $("#position_curd_table").bootstrapTable('getOptions');
        let pageSize = options.pageSize;
        $.ajax({//请求职位数据
            url: positionInterface,
            data: {
                pn: pn,
                size: pageSize,
                search: $("#search_input").val()
            },
            type: "GET",
            beforeSend: function(XMLHttpRequest ) {
                //在请求头部设置accessToken
                XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
            },
            async: false,
            //result是请求成功后返回的Json结果
            success: function (result) {
                //给表格装载数据
                loadTableData(result.dataMap.pageInfo);
            },
            error: function () {
                buildFlag = false;
                alertUtil.message("服务器后端未响应!", "danger");
            }
        });
        // $.get(positionInterface, {
        //     pn: pn,
        //     size: pageSize,
        //     search: $("#search_input").val()
        // }, function (result) {
        //     //给表格装载数据
        //     loadTableData(result.dataMap.pageInfo);
        // });
    }

    /**
     * 该方法用于构建 部门-职位 bootstrap表（不加载数据）
     */
    function initPositionTable() {
        let $table = $("#position_curd_table");
        //构造 部门bootstrap-table表
        $table.bootstrapTable({
            height: 500,
            //该函数用于设定行样式
            rowStyle: function (value, row, index) {
                return {
                    //该样式用于识别父部门数据行
                    classes: "department_row"
                }
            },
            columns: [
                {
                    checkbox: true,
                    title: '选择',
                    valign: 'middle'//居中
                },
                {
                    field: 'id',
                    title: '部门id',
                    width: 100
                },
                {
                    field: 'department_name',
                    title: '部门名',
                    width: 150
                },
                {
                    field: 'brief',
                    title: '简介'
                }
            ],
            clickToSelect: true,//点击该行进行选中
            detailView: true,
            formatRecordsPerPage: function (pageNumber) {
                return '页显示量:' + pageNumber;
            },
            formatShowingRows: function (pageFrom, pageTo, totalRows) {
                let pageSize = $("#position_curd_table").bootstrapTable('getOptions').pageSize;
                return '当前页:' + (Math.ceil(pageFrom / pageSize)) + ' &nbsp;总页数:' + (Math.ceil(totalRows / pageSize)) + ' &nbsp;总数据量:' + totalRows;
            },
            formatLoadingMessage: function () {
                return '加载中,请稍后...';
            },
            formatNoMatches: function () {
                return '找不到匹配的职位信息';
            },
            onExpandRow: function (index, row, $detail) {
                /* eslint no-use-before-define: ["error", { "functions": false }]*/

                let positionList = row.positionList;
                positionList.forEach(function (element) {//原生js遍历
                    element["department_name"] = row.department_name;
                });

                //遍历每一行职位数据，若该行的职位id在已选中的范围内，则设置为选中
                // $.each(positionList, function (index, item) {
                //     let isChecked = $.inArray(item.id, selectedObjects) !== -1;
                //     console.log("isChecked:"+isChecked);
                //     item.state = isChecked;
                // });

                //构造 职位bootstrap-table子表
                $detail.html('<table></table>').find('table').bootstrapTable({
                    uniqueId: "id",//设定id列
                    classes: "table table-bordered table-hover sub_position_table",//设定类
                    columns: [
                        {
                            checkbox: true,
                            title: '选择',
                            valign: 'middle'//居中
                        },
                        {
                            field: 'id',
                            title: '职位id'
                        },
                        {
                            field: 'position_name',
                            title: '职位名'
                        },
                        {
                            field: 'brief',
                            title: '简介'
                        },
                        // {
                        //     field: 'department_id',
                        //     title: '部门ID'
                        // },
                        {
                            field: 'department_name',
                            title: '隶属部门'
                        },
                        {
                            field: 'operate',
                            title: '操作',
                            clickToSelect: false,
                            //该函数用于设定该格子细节
                            formatter: function (value, row, index) {
                                let $updateBtn = $("<button class=\"btn btn-primary btn-sm update_position_btn\" style='margin-right:10px;margin-top:3px;'>编辑</button>").val(row.id);
                                let $deleteBtn = $("<button class=\"btn btn-danger btn-sm delete_position_btn\" style='margin-right:10px;margin-top:3px;'>删除</button>").val(row.id);
                                return $updateBtn[0].outerHTML + $deleteBtn[0].outerHTML;
                            }
                        }

                    ],
                    clickToSelect: true,//点击该行进行选中
                    data: positionList
                    // ,
                    // responseHandler: function (res) {
                    //     // $.each(res.rows, function (i, row) {
                    //     //     row.state = $.inArray(row.id, selectedObjects) !== -1
                    //     // });
                    //     $.each(res.rows, function (index, item) {
                    //         let isChecked = $.inArray(item.id, selectedObjects) !== -1;
                    //         console.log("isChecked:"+isChecked);
                    //         item.state = isChecked;
                    //     });
                    //     return res;
                    // }
                });

                // //获取选中的选项
                // let selectionsJsonDataList = $("#position_curd_table").bootstrapTable('getSelections');
                // let selectionsList = [];
                // console.log(selectionsJsonDataList);
                // //检查该行有没有被选中，若有选中，则在展开的同时全选子项
                // selectionsJsonDataList.forEach(function(item,index){
                //     selectionsList.push(item["id"]);
                //     if (row.id == item["id"])
                //         $detail.find('table').bootstrapTable("checkAll");
                //         // alertUtil.message("id为"+row.id+"的行被选中","info");
                // });

                //获取选中项目并让子表选中
                let nowSelections = getAttributeArray(selectedPositions, "id");
                $detail.find('table').bootstrapTable('checkBy', {field: 'id', values: nowSelections});
                //获取子表内所有项的Id列表
                let nowTablePositionIds = $.map(positionList, function (item) {
                    return item.id;
                });
                // let selectedObjects = getAttributeArray();
                //若已选中的id们包含该表内所有id，则说明父表内该项已可勾选
                if (isSubset(nowTablePositionIds, nowSelections))
                    $("#position_curd_table").bootstrapTable('checkBy', {field: 'id', values: [row.id]});

                //给子表增加底部间距
                $detail.find("div.fixed-table-container").css("padding-bottom", "40px");
            }
        });
    }

    /**
     * 该函数用于判断附带子表是否展开，<br>
     * 判断展开或关闭的基准是 展开行数 >= 1 为展开状态，其余为关闭状态<br>
     * 返回值：展开状态返回true，关闭状态返回false
     */
    function isTableExpand() {
        let result;
        let $detailViewRow = $("#position_curd_table").find(".department_row").next();
        console.log($detailViewRow);
        if ($detailViewRow.length <= 0) {//如果长度小于等于0，说明没展开，直接返回false
            result = false;
        } else {
            result = $detailViewRow.hasClass("detail-view");
        }
        return result;
    }

    /**
     * 该函数用于判断int集合set1是否是set2的子集<br>
     * 参数：set1为判断用的子集 ，set2为判断用的大集合<br>
     * 返回值：是子集则返回true，否则为false
     */
    function isSubset(set1, set2) {
        //遍历集合1
        for (let i = 0; i < set1.length; i++) {
            //是否子集的标识，默认不是子集
            let isSubsetFlag = false;
            for (let j = 0; j < set2.length; j++)
                if (set1[i] == set2[j]) {
                    isSubsetFlag = true;
                    break;
                }
            //每一个大循环遍历完成后，若不是子集，则立即返回
            if (!isSubsetFlag)
                return false;
        }
        //若set1的全部数字验证完后，则可以返回true
        return true;
    }

    /**
     * 该函数用于将数组集合set1与set2合并，<br>
     * 判断相同的条件为数组集合内对象的Id数值是否相等，<br>
     * 返回的集合里的内容会被新集合给更新<br>
     * 参数：set1为旧集合，set2为新集合<br>
     * 返回值：新的数组并集
     */
    function union(set1, set2) {
        //判断set1 2是否为集合，否则转换
        set1 = Array.isArray(set1) ? set1 : [set1];
        set2 = Array.isArray(set2) ? set2 : [set2];
        let set = set1.concat(set2);
        let resultSet = [];//要返回的超集
        let mapObject = {};//用于验证数组里对象是否已被存储的对象
        for (let i = 0; i < set.length; i++) {
            //如果mapObject里item.id不存在
            if (!(set[i].id in mapObject)) {//则该项添加进超集
                resultSet.push(set[i]);
                mapObject[set[i].id] = i;//设置好索引后下次不会再重复添加，且能用于更新
            } else {//否则该项去更新
                let oldIndex = mapObject[set[i].id];//取出存储的旧对象索引
                resultSet[oldIndex] = set[i];//旧对象更新为新对象
            }
        }
        return resultSet;
    }

    /**
     * 该函数用于将数组集合set1与set2做差集运算，<br>
     * 判断相同的条件为数组集合内对象的Id数值是否相等<br>
     * 参数：set1为被减集合，set2为减集合<br>
     * 返回值：新的已差集运算的数组集合
     */
    function difference(set1, set2) {
        //判断set1 2是否为数组，否则转换
        set1 = Array.isArray(set1) ? set1 : [set1];
        set2 = Array.isArray(set2) ? set2 : [set2];
        let set2Ids = getAttributeArray(set2, "id");

        let resultSet = set1.filter(function (item) {
            //set1里的id是否在set2中，若存在则为true，不存在则为false
            let isIdExist = (set2Ids.indexOf(item.id) !== -1);
            //返回值里true为保留，false为不保留
            return !isIdExist;
        });
        return resultSet;
    }

    /**
     * 该函数用于将数组中的属性值取出并生成数组<br>
     * 参数：array为原数组，attribute为数组里对象属性字符串<br>
     * 返回值：生成的属性数组
     */
    function getAttributeArray(array, attribute) {
        let list = $.map(array, function (item) {
            return item[attribute];
        });
        return list;
    }

    /**
     * 该方法用于构建部门下拉选框表。<br>
     * 返回值：true为构建成功，false为构建失败
     */
    function buildDepartmentSelect() {
        let $departmentSelect = $("#department_select");
        let buildFlag = false;//构建是否成功的标志

        $.ajax({//请求部门数据
            url: getAllDepartmentsInterface,
            type: "GET",
            async: false,
            beforeSend: function(XMLHttpRequest ) {
                //在请求头部设置accessToken
                XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
            },
            //result是请求成功后返回的Json结果
            success: function (result) {
                buildFlag = true;
                let departments = result.dataMap.departments;
                //先销毁原下拉框
                $departmentSelect.empty();
                //给下拉选框表装载数据
                $.each(departments, function (index, item) {
                    let $departmentOp = $("<option></option>")
                        .addClass("department_option")//加入一个识别用的框
                        .append(item.department_name)
                        .attr("value", item.id);//创建选项框
                    $departmentSelect.append($departmentOp);//加入选项框
                });
                //初始化每一行的selectpicker
                $departmentSelect.selectpicker({
                    'selectedText': 'cat',
                });

                //不刷新则无法显示
                $departmentSelect.selectpicker('refresh');
                $departmentSelect.selectpicker('render');
            },
            error: function () {
                buildFlag = false;
                alertUtil.message("服务器后端未响应!", "danger");
            }
        });
        return buildFlag;
    }

    /**
     * 该方法用于给表格加载数据
     */
    function loadTableData(pageInfo) {
        let tableData = {};
        tableData["total"] = pageInfo.total;
        tableData["rows"] = pageInfo.list;

        //重载数据并展开
        $("#position_curd_table").bootstrapTable('removeAll');
        $("#position_curd_table").bootstrapTable('load', tableData);
        $("#position_curd_table").bootstrapTable('expandAllRows');
    }

    /**
     * 该方法用于给模态框加载数据
     */
    function loadModalData(jsonData) {
        //装载数据
        for (let key in jsonData) {
            if (key == "department_id") {
                //给修改模态框进行默认勾选
                let departmentList = [];
                departmentList.push(jsonData[key]);
                $("#department_select").val(departmentList).selectpicker('refresh');//给修改模态框进行默认勾选;
                continue;
            }
            $("#position_modal form").find("input[name='" + key + "']").val(jsonData[key]);
        }
    }

    /**
     * 该方法用于获取模态框里的数据<br>
     * 返回值：一个模态框数据的json对象
     */
    function getModalData() {
        let $positionModal = $("#position_modal");
        let inputs = $positionModal.find("input");
        let selects = $positionModal.find("select");

        let positionJSONdata = {};
        $.each(inputs, function (index, item) {
            positionJSONdata[item.name] = $(item).val();
        });
        $.each(selects, function (index, item) {
            positionJSONdata[item.name] = $(item).val();
        });
        for (var key in positionJSONdata) {//清除空的属性
            if (positionJSONdata[key] == "") {//如果键为""才清理，不然不用清理
                delete positionJSONdata[key];
            }
        }

        console.log("positionJSONdata:");
        console.log(positionJSONdata);
        return positionJSONdata;
    }

    /**
     * 该方法用于获取该行按钮所在行的数据<br>
     * 参数: buttonThis 为一个按钮的this指针<br>
     * 返回值：该行按钮所在行的JSON形式数据对象
     */
    function getThisRowJsonData(buttonThis) {
        let positionID = $(buttonThis).val();
        //使用jq和getRowByUniqueId api来获取那一行的数据
        let positionJSONdata = $(buttonThis).parents("table.sub_position_table")//该按钮的祖先标签中的sub_position_table子职位表里面才是需要的表
            .bootstrapTable('getRowByUniqueId', positionID);
        return positionJSONdata;
    }

    /**
     * 该方法用于给模态框清除数据
     */
    function clearModalData() {
        $("#position_modal form").find("input").val("");
    }

    /**
     * 该方法用于给模态框加载错误信息
     */
    function loadModalError(fieldErrors) {
        clearModalError();
        for (let name in fieldErrors) {
            $("#position_modal form").find("input[name='" + name + "']").next().text(fieldErrors[name]);
            $("#position_modal form").find("input[name='" + name + "']").parent().addClass("has-error");
        }
    }

    /**
     * 该方法用于给模态框清除错误信息
     */
    function clearModalError() {
        $("#position_modal form").find("div").removeClass("has-error");
        $("#position_modal form").find("input").next().text("");
    }

    /**
     * 该方法用于给控件绑定事件
     */
    function bindOnEvent() {

        //搜索按钮
        $(document).off("click", "#search_btn").on("click", "#search_btn", function () {
            to_page(1);
        });

        //增加职位按钮
        $("#add_position_btn").off("click").click(function () {
            //先清除模态框错误
            clearModalError();
            $("#position_modal").find(".modal-title").text("新增职位信息");
            //去掉标识用的类，并增加标识用的类
            $("#position_confirm_btn").removeClass("position_add_confirm_btn position_update_confirm_btn").addClass("position_add_confirm_btn");
            //构建下拉栏
            let buildFlag = buildDepartmentSelect();
            //清除模态框数据
            clearModalData();
            if (buildFlag) {
                $("#position_modal").modal({//弹出模态框
                    backdrop: "static"
                });
            }
        });

        //切换子表展开关闭按钮
        $("#switch_sub_table_btn").off("click").click(function () {
            let $table = $("#position_curd_table");
            if (isTableExpand())
                $table.bootstrapTable('collapseAllRows');
            else
                $table.bootstrapTable('expandAllRows')
        });

        //多选删除按钮
        $("#mutiple_delete_btn").off("click").click(function () {
            //在选中项目数量大于0时才能弹出模态框
            if (selectedPositions.length > 0) {
                let positionIds = getAttributeArray(selectedPositions, "id");
                let positionNames = getAttributeArray(selectedPositions, "position_name");

                $("#delete_id_p").empty();//添加id前先清空
                $("#delete_id_p").text(positionIds.join(","));//添加删除的id
                $("#delete_tip_p").empty();//添加提示前先清空
                $("#delete_tip_p").append("确认删除职位<strong>[" + positionNames.join(",") + "]</strong>吗？<br><strong>注意，此操作不可逆！</strong>");//添加删除的提示

                $("#delete_modal").modal({//弹出模态框
                    backdrop: "static"
                });
            } else {//否则提示
                alertUtil.message("警告! 尚未选中任何职位!", "warning");
            }
        });

        //测试2按钮
        $("#test2_btn").off("click").click(function () {
            alertUtil.message(isTableExpand() ? "展开状态" : "关闭状态", "info");
        });

        //增加/修改职位的确认按钮
        $("#position_confirm_btn").off("click").click(function () {
            let $positionCurdTable = $("#position_curd_table");
            let $positionModal = $("#position_modal");

            let positionJSONdata = getModalData();
            let positionJSONstring = JSON.stringify(positionJSONdata);
            console.log("positionJSONstring:" + positionJSONstring);
            //增加职位的情况
            if ($(this).hasClass("position_add_confirm_btn")) {
                // alertUtil.message("增加职位的情况","info");

                $.ajax({//请求保存该职位
                    url: positionInterface,
                    data: positionJSONstring,
                    contentType: 'application/json;charset=utf-8',
                    type: "POST",
                    beforeSend: function(XMLHttpRequest ) {
                        //在请求头部设置accessToken
                        XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
                    },
                    //请求成功后的回调函数
                    //result是请求成功后返回的Json结果
                    success: function (result) {
                        if (result.code == 200) {
                            alertUtil.message(result.msg);
                            $("#search_input").val(result.dataMap.position_id);//设置当前增加的职位ID
                            //关闭模态框
                            $positionModal.modal('hide');
                            //跳转到
                            let pageNumber = $("#position_curd_table").bootstrapTable('getOptions').pageNumber;
                            to_page(1);
                        } else {
                            alertUtil.message(result.msg, "danger");
                            //加载错误信息
                            loadModalError(result.dataMap.fieldErrors);
                        }
                    },
                    error: function () {
                        //关闭模态框
                        $positionModal.modal('hide');
                        alertUtil.message("服务器后端未响应!", "danger");
                    }
                });
            }

            //修改职位的情况
            if ($(this).hasClass("position_update_confirm_btn")) {
                // alertUtil.message("修改职位的情况","info");
                $.ajax({//请求修改该职位
                    url: positionInterface,
                    data: positionJSONstring,
                    contentType: 'application/json;charset=utf-8',
                    type: "PUT",
                    beforeSend: function(XMLHttpRequest ) {
                        //在请求头部设置accessToken
                        XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
                    },
                    //请求成功后的回调函数
                    //result是请求成功后返回的Json结果
                    success: function (result) {
                        if (result.code == 200) {
                            alertUtil.message(result.msg);
                            $("#search_input").val(result.dataMap.position_id);//设置当前增加的职位ID
                            //关闭模态框
                            $positionModal.modal('hide');
                            //跳转到
                            let pageNumber = $("#position_curd_table").bootstrapTable('getOptions').pageNumber;
                            to_page(pageNumber);
                        } else {
                            alertUtil.message(result.msg, "danger");
                            //加载错误信息
                            loadModalError(result.dataMap.fieldErrors);
                        }
                    },
                    error: function () {
                        //关闭模态框
                        $positionModal.modal('hide');
                        alertUtil.message("服务器后端未响应!", "danger");
                    }
                });
            }
        });

        //删除职位的确认按钮
        $("#delete_position_confirm_btn").off("click").click(function () {
            let $deleteModal = $("#delete_modal");
            let positionsIdString = $("#delete_id_p").text();

            $.ajax({//请求删除这些职位
                url: positionInterface + "?idList=" + positionsIdString,
                // data: "idList=" + positionsIdString,
                type: "DELETE",
                beforeSend: function(XMLHttpRequest ) {
                    //在请求头部设置accessToken
                    XMLHttpRequest.setRequestHeader("accessToken", sessionStorage.getItem("accessToken"));
                },
                //请求成功后的回调函数
                //result是请求成功后返回的Json结果
                success: function (result) {
                    if (result.code == 200) {
                        alertUtil.message(result.msg);
                        //关闭模态框
                        $deleteModal.modal('hide');
                        let deletedPositions = [];//要删除的职位数组
                        positionsIdString.split(",").forEach((item) => {
                            let intId = parseInt(item);
                            deletedPositions.push({'id': intId});
                        })
                        //已选择的项目去除已删除的部分(求差集)
                        selectedPositions = difference(selectedPositions, deletedPositions);
                        //跳转到当前页
                        let pageNumber = $("#position_curd_table").bootstrapTable('getOptions').pageNumber;
                        to_page(pageNumber);
                    } else {
                        alertUtil.message(result.msg, "danger");
                    }
                },
                error: function () {
                    //关闭模态框
                    $deleteModal.modal('hide');
                    alertUtil.message("服务器后端未响应!", "danger");
                }
            });

        });

        //每行编辑按钮
        $(document).off("click", ".update_position_btn").on("click", ".update_position_btn", function () {
            //先清除模态框错误
            clearModalError();
            $("#position_modal").find(".modal-title").text("编辑职位信息");
            //去掉标识用的类，并增加标识用的类
            $("#position_confirm_btn").removeClass("position_add_confirm_btn position_update_confirm_btn").addClass("position_update_confirm_btn");
            // let positionID = $(this).val();
            // //使用jq和getRowByUniqueId api来获取那一行的数据
            // let positionJSONdata = $(this).parents("table.sub_position_table")//该按钮的祖先标签中的sub_position_table子职位表里面才是需要的表
            //     .bootstrapTable('getRowByUniqueId', positionID);
            let positionJSONdata = getThisRowJsonData(this);
            //构建下拉栏
            let buildFlag = buildDepartmentSelect(positionJSONdata["department_id"]);
            //给模态框加载数据
            loadModalData(positionJSONdata);
            if (buildFlag) {
                $("#position_modal").modal({//弹出模态框
                    backdrop: "static"
                });
            }
        });

        //每行删除按钮
        $(document).off("click", ".delete_position_btn").on("click", ".delete_position_btn", function () {
            let positionJSONdata = getThisRowJsonData(this);
            let positionName = positionJSONdata["position_name"];

            $("#delete_id_p").empty();//添加id前先清空
            $("#delete_id_p").text(positionJSONdata["id"]);//添加删除的id
            $("#delete_tip_p").empty();//添加提示前先清空
            $("#delete_tip_p").append("确认删除职位<strong>[" + positionName + "]</strong>吗？<br><strong>注意，此操作不可逆！</strong>");//添加删除的提示

            $("#delete_modal").modal({//弹出模态框
                backdrop: "static"
            });
        });

        //page-change.bs.table是bootstrap-table在改变页数时会触发的事件
        $(document).off("page-change.bs.table").on("page-change.bs.table", function (e, number, size) {
            // let pageNum = $(".page-item.active").text();
            // alertUtil.message("页数发生改变，获取到的页数为：" + number, "info");
            to_page(number);
        });

        //search.bs.table是bootstrap-table在搜索时会触发的事件
        // $(document).off("search.bs.table").on("search.bs.table", function (text) {
        //     to_page(1);
        //     alertUtil.message("监测到搜索", "info");
        // });

        //绑定单行数据选框 选中 的触发事件(包含父表和子表)
        $(document).off("check.bs.table", "#position_curd_table").on("check.bs.table", "#position_curd_table", function (event, row, $element) {
            let tableName = $(event.target).is("#position_curd_table") ? "父表" : "子表";
            console.log("触发 " + tableName + " 单行数据选框 " + event.type + " 的触发事件");

            //若不这么做会由于"事件冒泡"导致无限循环触发子表的check-all事件，最终栈溢出
            //如果为position_curd_table，则为父表选中时的行为
            if ($(event.target).is("#position_curd_table")) {//父表选中时的行为
                //在子表展开时进行全选
                //获取选中的tr行
                let $departmentRow = $(".department_row.selected");
                let $departmentRowNext = $departmentRow.next();
                let detailViews = [];//dom对象
                //遍历被选中的tr行
                $.each($departmentRowNext, function (index, item) {
                    if ($(item).hasClass("detail-view"))
                        detailViews.push(item);
                });
                //detailViews内附属的子表选中
                detailViews.forEach(function (item, index) {
                    $(item).find("table").bootstrapTable('checkAll');
                });

                //在子表关闭时进行全选
                //获取子表内所有项的职位
                let nowTablePositions = row.positionList;
                selectedPositions = union(selectedPositions, nowTablePositions);//记录表内职位(求并集)
            } else {//否则为子表选中的行为
                selectedPositions = union(selectedPositions, row);//记录该职位(求并集)

                //获取子表内所有项的Id列表
                let nowTablePositionIds = getAttributeArray($(event.target).bootstrapTable('getData'), "id");

                //若已选列表里已含有子表内所有Id，则父表该项可以选中
                if (isSubset(nowTablePositionIds, getAttributeArray(selectedPositions, "id"))) {
                    //父表该项选中
                    let departmentId = parseInt($(event.target).parents("tr").prev(".department_row").find("td:eq(2)").text());
                    let checkIdList = [];
                    checkIdList.push(departmentId);
                    $("#position_curd_table").bootstrapTable('checkBy', {field: 'id', values: checkIdList});
                }
            }
        });

        //绑定单行数据选框的 未选中 触发事件(包含父表和子表)
        $(document).off("uncheck.bs.table", "#position_curd_table").on("uncheck.bs.table", "#position_curd_table", function (event, row, $element) {
            let tableName = $(event.target).is("#position_curd_table") ? "父表" : "子表";
            console.log("触发 " + tableName + " 单行数据选框 " + event.type + " 的触发事件");
            // console.log(event);
            // console.log(row);
            // console.log($element);
            //父表未选中时的行为
            if ($(event.target).is("#position_curd_table")) {
                //如果父表允许 全不选 附属的子表
                if (canParentTableUncheck) {
                    //在子表展开时进行全不选
                    //获取当前未选中的tr行
                    let $departmentRow = $($element).parents("tr");
                    // console.log($departmentRow);
                    let $departmentRowNext = $departmentRow.next();
                    //附属的子表全不选中
                    $departmentRowNext.find("table").bootstrapTable('uncheckAll');

                    //在子表关闭时全不选
                    let nowTablePositions = row.positionList;//获取子表内所有项
                    selectedPositions = difference(selectedPositions, nowTablePositions);//移除表内职位(求差集)
                } else {//否则不允许全不选中，但这次事件触发完成以后，就又可以全不选中
                    canParentTableUncheck = true;
                }
            } else {//否则为子表未选中的行为
                //由于是子表触发的父表不选中事件，所以设定不触发父表再次全不选子表行为
                canParentTableUncheck = false;
                let departmentId = row.department_id;
                let uncheckIdList = [];
                uncheckIdList.push(departmentId);

                $("#position_curd_table").bootstrapTable('uncheckBy', {field: 'id', values: uncheckIdList});

                let checkPosition = row;//获取当前子表行职位
                selectedPositions = difference(selectedPositions, checkPosition);//移除该职位名(求差集)
            }

        });

        //绑定单行数据选框 全选中 的触发事件(包含父表和子表)
        $(document).off("check-all.bs.table", "#position_curd_table").on("check-all.bs.table", "#position_curd_table", function (event) {
            let tableName = $(event.target).is("#position_curd_table") ? "父表" : "子表";
            console.log("触发 " + tableName + " 单行数据选框 " + event.type + " 的触发事件");

            //如果为position_curd_table，则为父表选中时的行为
            if ($(event.target).is("#position_curd_table")) {

                //获取tr行
                let $departmentRow = $(".department_row");
                let $departmentRowNext = $departmentRow.next();
                let detailViews = [];//dom对象

                //遍历tr行
                $.each($departmentRowNext, function (index, item) {
                    if ($(item).hasClass("detail-view"))
                        detailViews.push(item);
                });

                //detailViews内附属的子表选中
                detailViews.forEach(function (item, index) {
                    //直接使用checkAll函数会导致递归触发子表的check-all事件而栈溢出
                    $(item).find("table").bootstrapTable('checkAll');
                });

                //获取所有项的职位信息
                let nowTablePositions = [];
                $.each($("#position_curd_table").bootstrapTable("getData"), function (index, item) {
                    nowTablePositions = nowTablePositions.concat(item.positionList);
                });
                selectedPositions = union(selectedPositions, nowTablePositions);//记录表内职位(求并集)
            } else {//否则为子表的check-all事件

                let departmentId = parseInt($(event.target).parents("tr").prev(".department_row").find("td:eq(2)").text());
                let checkIdList = [];
                // console.log(departmentId);
                checkIdList.push(departmentId);
                $("#position_curd_table").bootstrapTable('checkBy', {field: 'id', values: checkIdList});

                //获取子表内所有项的Id列表
                let nowTablePositions = $(event.target).bootstrapTable('getData');
                selectedPositions = union(selectedPositions, nowTablePositions);//记录表内职位(求并集)
            }

        });

        //绑定单行数据选框 全不选中 的触发事件(包含父表和子表)
        $(document).off("uncheck-all.bs.table", "#position_curd_table").on("uncheck-all.bs.table", "#position_curd_table", function (event, rowsAfter, rowsBefore) {
            let tableName = $(event.target).is("#position_curd_table") ? "父表" : "子表";
            console.log("触发 " + tableName + " 单行数据选框 " + event.type + " 的触发事件");
            //如果事件目标不为自身，则直接返回
            //若不这么做会由于"事件冒泡"导致递归触发子表的check-all事件，最终栈溢出
            // if(event.target != this)
            //     return ;

            //如果为position_curd_table，则为父表选中时的行为
            if ($(event.target).is("#position_curd_table")) {
                //获取tr行
                let $departmentRow = $(".department_row");
                let $departmentRowNext = $departmentRow.next();
                let detailViews = [];//dom对象

                //遍历tr行
                $.each($departmentRowNext, function (index, item) {
                    if ($(item).hasClass("detail-view"))
                        detailViews.push(item);
                });

                //detailViews内附属的子表不选中
                detailViews.forEach(function (item, index) {
                    //直接使用checkAll函数会导致递归触发子表的check-all事件而栈溢出
                    $(item).find("table").bootstrapTable('uncheckAll');
                });

                //获取所有项的职位信息
                let nowTablePositions = [];
                $.each($("#position_curd_table").bootstrapTable("getData"), function (index, item) {
                    nowTablePositions = nowTablePositions.concat(item.positionList);
                });
                // selectedObjects = _.difference(selectedObjects,nowTablePositionIds);//移除表内id(求差集)
                selectedPositions = difference(selectedPositions, nowTablePositions);//移除表内职位(求差集)
            } else {//否则为子表的uncheck-all事件
                let departmentId = parseInt($(event.target).parents("tr").prev(".department_row").find("td:eq(2)").text());
                let uncheckIdList = [];
                // console.log(departmentId);
                uncheckIdList.push(departmentId);
                // //uncheckBy
                $("#position_curd_table").bootstrapTable('uncheckBy', {field: 'id', values: uncheckIdList});

                //获取子表内所有项列表
                let nowTablePositions = $(event.target).bootstrapTable('getData');
                selectedPositions = difference(selectedPositions, nowTablePositions);//移除表内职位名(求差集)
            }

        });
    }

</script>